---
id: vdomIntroduction
title: vdom 简介
---

## 简介

在这里 vdom 指的用 js 来描述 DOM 结构，因为不是真实的 DOM，所以叫作**virtual dom (vdom)**

模拟一段：

```html
<!-- html -->
<div id="root" class="container">
  <span style="color:yellow">推荐：你不知道的JavaScript</span>
  <ul>
    <li>第一章</li>
  </ul>
</div>
```

对应的 JS 可能长成这样。

```js
// js
{
    ele: "div",
    props: {
        id: "root",
        className: "container"
    },
    children:[{
        ele: "span",
        style: {
            color: "yellow"
        },
        children: "推荐：你不知道的JavaScript"
    },{
        ele: "ul",
        children:[{
            ele: "li",
            children: "第一章"
        }]
    }]
}
```

## 为什么要使用 vdom

```html
<body>
  <div id="root"></div>
  <script>
    let attrs = "";
    for (let attr in document.querySelector("#root")) {
      attrs += `${attr}  \n`;
    }
    console.log(attrs);
  </script>
</body>
```

上面这段代码会打印一个 div 上面所有的属性，（如果这个 div 上面还包含了事件和动画，那就更复杂了）。

在进行复杂 DOM 操作的时候开销是比较大的，所以我们在这里用 JS 先模拟 DOM,最后再进行操作。  
（如果操作的 DOM 很少，这些 DOM 库不一定有原生的快）

## 为什么 vdom 处理复杂 DOM 会快

当然核心就是 vdom 内的 diff 算法。

传统的树 diff 算法的时间复杂度是 O(n^3);

## 部分 vdom 库

**1. snabbdom  [github仓库](https://github.com/snabbdom/snabbdom/blob/master/README-zh_CN.md)**  
**2. virtual-dom  [github仓库](https://github.com/Matt-Esch/virtual-dom)**  
